<template>
  <view class="ss-flex ss-col-center">
    <view
      v-if="data.type === 'text'"
      class="nav-title inline"
      :style="[{ color: data.textColor, width: width }]"
    >
      {{ data.text }}
    </view>
    <view
      v-if="data.type === 'image'"
      :style="[{ width: width }]"
      class="menu-icon-wrap ss-flex ss-row-center ss-col-center"
      @tap="sheep.$router.go(data.url)"
    >
      <!-- <image class="nav-image" :src="sheep.$url.cdn(data.src)" mode="aspectFit"></image> -->
    </view>
	<view class="picker ss-flex justify-center" v-if="data.type == 'picker'" :style="[{ width: width }]"  @click="btnclick">
		 <view :style="{'color':`${data.regionColor}`}">{{ data.region }}</view>
		 <uni-icons type="bottom" size="16" :color="data.regionColor" class="icon_class" v-if="data.region.length<5"></uni-icons>
	</view>
    <view class="ss-flex-1 ss-flex" v-if="data.type == 'search'" :style="[{ width: width }]">
      <s-search-block
        :placeholder="data.placeholder || '搜索关键字'"
        :radius="data.borderRadius"
        elBackground="#fff"
        :height="height"
		:width="searchWidth"
        @click="sheep.$router.go('/pages/etc/search')"
      ></s-search-block>
	  <button class="ss-reset-button btn" v-if="data.showBtn == 1" :style="{
		  height:height + 'px',
		  borderRadius: data?.btnBorderRadius + 'px' ,
		color: data?.btnTextColol,
		background: data?.btnBgColol,
	  }" @click="sheep.$router.go('/pages/etc/search')">搜索</button>
    </view>
  </view>
  
</template>

<script setup>
  import sheep from '@/sheep';
  import { computed,onMounted,reactive } from 'vue';

  // 接收参数
  const props = defineProps({
    data: {
      type: Object,
      default: () => ({}),
    },
    width: {
      type: String,
      default: '1px',
    },
  });
  const emits = defineEmits(['region'])
  const btnclick =()=>{
	  emits('region')
  }

	const searchWidth =  computed(() => `calc( ${props.width } - ${(props.data.showBtn == 1 ? 100 : 0) + 16}rpx)`); 
	
  const height = computed(() => sheep.$platform.capsule.height);
</script>

<style lang="scss" scoped>
  .nav-title {
    font-size: 36rpx;
    color: #333;
    text-align: center;
  }

  .menu-icon-wrap {
    .nav-image {
      height: 24px;
    }
  }
  .btn{
	  width: 100rpx;
	  min-width: 100rpx;
	  margin-left: 16rpx;
  }
</style>
